import React, { useCallback } from 'react';
import { Menu, Icon } from 'choerodon-ui';
import { ClickParam } from 'choerodon-ui/lib/menu';

const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;

const MenuHorizontal: React.FC = () => {

  const handleClick = useCallback((e: ClickParam) => {
    console.log(e.key);
  }, []);

  return (
    <>
      <Menu onClick={handleClick} mode="horizontal">
        <Menu.Item key="mail">
          <Icon type="mail_outline" />
          Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="apps" />
          Navigation Two
        </Menu.Item>
        <SubMenu
          title={
            <span>
              <Icon type="settings" />
              Navigation Three - Submenu
            </span>
        }
        >
          <MenuItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="choerodon">
          <a
            href="https://choerodon.github.io/choerodon-ui/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Navigation Four - Link
          </a>
        </Menu.Item>
      </Menu>
    </>
  );
};

export default MenuHorizontal;